<template>
  <div class="container">
    <div
      class="home-module__course"
      :class="datas.source == 'splendid' ? 'recommend-template' : 'bg-white'"
    >
      <div class="course-header">
        <div class="title">{{ datas.category_title || datas.title }}</div>
        <div v-if="datas.key == 'intentCourse'" class="more" @click="goMore(datas.key)">
          <i class="el-icon-edit-outline"></i>修改意向课程
        </div>
        <div v-else class="more" @click="goMore(datas.source)">
          更多<i v-if="datas.source == 'splendid'" class="el-icon-arrow-right"></i>
        </div>
      </div>

      <!-- 最近直播 -->
      <template v-if="datas.source == 'lately_live'">
        <!-- 宫格 -->
        <div
          v-if="datas.arrange == 1 && datas.list.length > 0"
          class="course-live gongge"
          :class="`col-${datas.column}`"
        >
          <div class="item" v-for="(item, index) in datas.list" :key="index">
            <div class="avatar" @click="goCourse(item.id)">
              <edu-image :src="item.teacher_avatar" fit="cover" lazy class="hvr-grow"></edu-image>
              <div class="status" v-if="item.live_rate.status == 999">
                <div class="playing">
                  <div class="playing__bar playing__bar1"></div>
                  <div class="playing__bar playing__bar2"></div>
                  <div class="playing__bar playing__bar3"></div>
                  <div class="playing__bar playing__bar4"></div>
                </div>
                直播中
              </div>
              <div class="time" v-else-if="datas.column != 2">
                {{ item.start_time | parseTime('{m}月{d}日 {h}:{i}') }}
              </div>
            </div>
            <div class="content">
              <div class="signal">
                <img
                  v-if="$util.inArray(item.promotion_type, [1, 2, 3, 4])"
                  class="img-activity"
                  :src="eventIcon[item.promotion_type]"
                />
                <div class="title" @click="goCourse(item.id)">{{ item.title }}</div>
              </div>
              <div class="mutable" v-if="datas.column == 2">
                {{ item.start_time | parseTime('{m}月{d}日 {h}:{i}') }}-{{
                  item.end_time | parseTime('{h}:{i}')
                }}
              </div>
              <div class="parallel">
                <div class="name">讲师：{{ item.teacher_name }}</div>
                <div class="divider"></div>
                <div class="num">{{ item.sale_count }}人在学</div>
                <template v-if="datas.column == 2">
                  <div
                    v-if="$util.isDef(item.is_buy) && item.is_buy == 1"
                    class="btn"
                    @click="goCourse(item.id)"
                  >
                    开始学习
                  </div>
                  <div v-else class="btn" @click="goCourseLearning(item)">加入学习</div>
                </template>
                <template v-else>
                  <template v-if="$util.isDef(item.is_buy) && item.is_buy == 1">
                    <div class="free">已购买</div>
                  </template>
                  <template v-else>
                    <div class="price" v-if="item.user_price > 0">
                      {{ item.user_price | formatMoney }}
                    </div>
                    <div v-else class="free">免费</div>
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>

        <!-- 滚动 -->
        <div
          v-else-if="datas.arrange == 2 && datas.list.length > 0"
          class="course-live scroll"
          :class="`course-live-swiper-${moduleIndex}`"
        >
          <swiper :options="liveSwiperOption">
            <swiper-slide v-for="(item, index) in datas.list" :key="index">
              <div class="divider">
                <div
                  v-if="
                    parseTime(new Date(), '{y}-{m}-{d}') ==
                      parseTime(item.start_time, '{y}-{m}-{d}')
                  "
                  class="divider__context"
                >
                  <div class="text">今天</div>
                  <div class="time">
                    {{ parseTime(item.start_time, '{h}:{i}') }}-{{
                      parseTime(item.end_time, '{h}:{i}')
                    }}
                  </div>
                </div>
                <div v-else class="divider__context">
                  <div class="text">{{ parseTime(item.start_time, '周{a}') }}</div>
                  <div class="time">
                    {{ parseTime(item.start_time, '{m}月{d}日') }}
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="avatar" @click="goCourse(item.id)">
                  <edu-image
                    :src="item.teacher_avatar"
                    fit="cover"
                    lazy
                    class="hvr-grow"
                  ></edu-image>
                  <div class="status" v-if="item.live_rate.status == 999">
                    <div class="playing">
                      <div class="playing__bar playing__bar1"></div>
                      <div class="playing__bar playing__bar2"></div>
                      <div class="playing__bar playing__bar3"></div>
                      <div class="playing__bar playing__bar4"></div>
                    </div>
                    直播中
                  </div>
                </div>
                <div class="content">
                  <div class="signal">
                    <img
                      v-if="$util.inArray(item.promotion_type, [1, 2, 3, 4])"
                      class="img-activity"
                      :src="eventIcon[item.promotion_type]"
                    />
                    <div class="title" @click="goCourse(item.id)">{{ item.title }}</div>
                  </div>
                  <div class="mutable">
                    {{ item.start_time | parseTime('{m}月{d}日 {h}:{i}') }}-{{
                      item.end_time | parseTime('{h}:{i}')
                    }}
                  </div>
                  <div class="parallel">
                    <div class="name">讲师：{{ item.teacher_name }}</div>
                    <div class="divider"></div>
                    <div class="num">{{ item.sale_count }}人在学</div>
                    <template v-if="$util.isDef(item.is_buy) && item.is_buy == 1">
                      <div class="btn" @click="goCourse(item.id)">
                        开始学习
                      </div>
                    </template>
                    <template v-else>
                      <div class="price" v-if="item.user_price > 0">
                        {{ item.user_price | formatMoney }}
                      </div>
                      <div v-else class="free">免费</div>
                      <div class="btn" @click="goCourseLearning(item)">加入学习</div>
                    </template>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div>
        </div>
      </template>

      <!-- 其他课程 -->
      <template v-else>
        <!-- 宫格 -->
        <div
          v-if="datas.arrange == 1 && datas.list.length > 0"
          class="course-list gongge"
          :class="`col-${datas.column}`"
        >
          <div class="item" v-for="(item, index) in datas.list" :key="index">
            <div class="picture">
              <EduCourseImage
                :image="item.cover_url"
                :course-type="item.course_type"
                :promotion-type="item.promotion_type"
                :border-radius="6"
                height="100%"
                lazy
                class="hvr-float"
                @click="goCourse(item.id)"
              >
                <!-- 活动图标 -->
                <img
                  slot="promotion"
                  v-if="datas.source == 'event' && $util.inArray(item.promotion_type, [1, 2, 3, 4])"
                  class="activity"
                  :src="eventIcon[item.promotion_type]"
                />

                <!-- 直播时间 -->
                <div v-if="item.course_type == 2 && item.start_time > 0" class="time">
                  {{ getFormateDate(item.start_time) }}
                </div>
              </EduCourseImage>
            </div>
            <div class="content">
              <div class="title" @click="goCourse(item.id)">{{ item.title }}</div>

              <!-- 活动-倒计时 -->
              <count-down
                v-if="datas.source == 'event' && item.promotion_running_status == 1"
                :time="item.promotion_end_countdown"
              ></count-down>

              <!-- 推荐-讲师 -->
              <template v-if="datas.source == 'splendid' && datas.column == 2">
                <div v-if="item.course_type == 4" class="teacher">
                  <div class="teacher-item" v-for="user in item.teacher" :key="user.id">
                    <edu-avatar
                      :src="user.avatar"
                      shape="circle"
                      :size="25"
                      @click="goTeacher(user.user_id)"
                    ></edu-avatar>
                    <div class="name" @click="goTeacher(user.user_id)">{{ user.title }}</div>
                  </div>
                </div>
                <div v-else class="teacher">
                  <div class="teacher-item">
                    <edu-avatar
                      :src="item.teacher_avatar"
                      shape="circle"
                      :size="25"
                      @click="goTeacher(item.teacher_id)"
                    ></edu-avatar>
                    <div class="name" @click="goTeacher(item.teacher_id)">
                      {{ item.teacher_name }}
                    </div>
                  </div>
                </div>
              </template>

              <div class="parallel">
                <div class="num">{{ item.sale_count }}人在学</div>

                <!-- 活动-立省 -->
                <div v-if="datas.source == 'event'" class="save">
                  立省{{
                    ((item.user_price * 100 - item.promotion_price * 100) / 100) | formatMoney
                  }}
                </div>

                <div class="free" v-if="$util.isDef(item.is_buy) && item.is_buy == 1">已购买</div>
                <template v-else>
                  <template v-if="datas.source == 'event'">
                    <div class="price" v-if="item.promotion_price > 0">
                      {{ item.promotion_price | formatMoney }}
                    </div>
                    <div v-else class="free">免费</div>
                  </template>
                  <template v-else>
                    <div class="price" v-if="item.user_price > 0">
                      {{ item.user_price | formatMoney }}
                    </div>
                    <div v-else class="free">免费</div>
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>

        <!-- 滚动 -->
        <div
          v-else-if="datas.arrange == 2 && datas.list.length > 0"
          class="course-list scroll"
          :class="`course-list-swiper-${moduleIndex}`"
        >
          <swiper :options="courseSwiperOption">
            <swiper-slide v-for="(item, index) in datas.list" :key="index">
              <div class="item">
                <div class="picture">
                  <EduCourseImage
                    :image="item.cover_url"
                    :course-type="item.course_type"
                    :promotion-type="item.promotion_type"
                    :border-radius="6"
                    height="100%"
                    lazy
                    class="hvr-sink"
                    @click="goCourse(item.id)"
                  >
                    <!-- 活动图标 -->
                    <img
                      slot="promotion"
                      v-if="
                        datas.source == 'event' && $util.inArray(item.promotion_type, [1, 2, 3, 4])
                      "
                      class="activity"
                      :src="eventIcon[item.promotion_type]"
                    />

                    <!-- 直播时间 -->
                    <div v-if="item.course_type == 2 && item.start_time > 0" class="time">
                      {{ getFormateDate(item.start_time) }}
                    </div>
                  </EduCourseImage>
                </div>
                <div class="content">
                  <div class="title" @click="goCourse(item.id)">{{ item.title }}</div>

                  <!-- 活动-倒计时 -->
                  <count-down
                    v-if="datas.source == 'event' && item.promotion_running_status == 1"
                    :time="item.promotion_end_countdown"
                  ></count-down>
                  <div class="parallel">
                    <div class="num">{{ item.sale_count }}人在学</div>

                    <!-- 活动-立省 -->
                    <div v-if="datas.source == 'event'" class="save">
                      立省{{
                        ((item.user_price * 100 - item.promotion_price * 100) / 100) | formatMoney
                      }}
                    </div>

                    <div class="free" v-if="$util.isDef(item.is_buy) && item.is_buy == 1">
                      已购买
                    </div>
                    <template v-else>
                      <template v-if="datas.source == 'event'">
                        <div class="price" v-if="item.promotion_price > 0">
                          {{ item.promotion_price | formatMoney }}
                        </div>
                        <div v-else class="free">免费</div>
                      </template>
                      <template v-else>
                        <div class="price" v-if="item.user_price > 0">
                          {{ item.user_price | formatMoney }}1
                        </div>
                        <div v-else class="free">免费</div>
                      </template>
                    </template>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import EduCourseImage from '@/components/EduCourseImage'
import countDown from './countDown'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { parseTime } from '@/utils/filters.js'
export default {
  name: 'Topic',
  components: {
    Swiper,
    SwiperSlide,
    EduCourseImage,
    countDown
  },
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    moduleIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      parseTime,
      liveSwiperOption: {
        slidesPerView: 2,
        spaceBetween: 40,
        loop: false,
        loopAdditionalSlides: 0,
        navigation: {
          nextEl: `.course-live-swiper-${this.moduleIndex} .swiper-button-next`,
          prevEl: `.course-live-swiper-${this.moduleIndex} .swiper-button-prev`
        }
      },
      courseSwiperOption: {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: false,
        loopAdditionalSlides: 0,
        navigation: {
          nextEl: `.course-list-swiper-${this.moduleIndex} .swiper-button-next`,
          prevEl: `.course-list-swiper-${this.moduleIndex} .swiper-button-prev`
        }
      },
      courseIcon: {
        1: require('@/assets/images/course/course_video_icon.png'),
        2: require('@/assets/images/course/course_live_icon.png'),
        4: require('@/assets/images/course/course_class_icon.png')
      },
      eventIcon: {
        1: require('@/assets/images/course/course_discount_icon.png'),
        2: require('@/assets/images/course/course_miaosha_icon.png'),
        3: require('@/assets/images/course/course_kanjia_icon.png'),
        4: require('@/assets/images/course/course_pintuan_icon.png')
      }
    }
  },
  methods: {
    // 跳转更多
    goMore(key) {
      let query = {}
      if (key == 'hot') {
        query = {
          order: 'popular'
        }
      } else if (this.$util.inArray(key, ['splendid', 'latest'])) {
        query = {
          order: key
        }
      } else if (this.$util.inArray(key, ['free', 'event'])) {
        query = {
          param: key
        }
      } else if (key == 'lately_live') {
        query = {
          type: 2
        }
      }
      if (key == 'intentCourse') {
        this.$emit('click')
      } else {
        this.$router.push({
          path: '/course',
          query: query
        })
      }
    },
    // 跳转课程
    goCourse(id) {
      if (id == 0) return
      this.$router.push({
        path: '/course/' + id
      })
    },
    // 加入学习
    goCourseLearning(item) {
      if (item.user_price > 0) {
        this.$router.push({
          path: '/buy/course',
          query: {
            cid: item.id,
            redirect: this.$route.path
          }
        })
      } else {
        if (item.id == 0) return
        // 免费课程
        this.$api.createCourseStudentJoin(
          {
            course_id: item.id
          },
          res => {
            this.$message.success(res.msg, _res => {
              this.reload()
            })
          }
        )
      }
    },
    goTeacher(id) {
      if (id == 0) return
      this.$router.push({
        path: '/user',
        query: {
          id
        }
      })
    },
    getFormateDate(timestamp) {
      const format = '{y}-{m}-{d}'
      const now = new Date() // 当前
      if (timestamp.toString().length == 10) timestamp *= 1000
      const date = new Date(timestamp)
      const nextDate = function(date, amount = 1) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount)
      }
      // 当前年
      if (now.getFullYear() == date.getFullYear()) {
        if (parseTime(now, format) == parseTime(date, format)) {
          return parseTime(timestamp, '今天 {h}:{i}')
        } else if (parseTime(nextDate(now), format) == parseTime(date, format)) {
          return parseTime(timestamp, '明天 {h}:{i}')
        } else {
          return parseTime(timestamp, '{m}月{d}日 {h}:{i}')
        }
      } else {
        return parseTime(timestamp, '{y}年{m}月{d}日 {h}:{i}')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/hover.scss';
.home-module__course {
  margin-bottom: 30px;
  padding: 30px 0;
  &.bg-white {
    background: #ffffff;
  }
  .course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-left-width: 3px;
    border-left-style: solid;
    @include edu-color-primary(border-left-color);
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      line-height: 22px;
    }
    .more {
      font-size: 14px;
      font-weight: 400;
      color: #aeaeae;
      line-height: 16px;
      cursor: pointer;
    }
  }
  .course-live {
    padding: 0 15px;
    margin-top: 35px;
    .item {
      border-radius: 6px;
      border: 1px solid #e4e7ed;
      .avatar {
        position: relative;
        cursor: pointer;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
        .status {
          display: flex;
          align-items: center;
          height: 20px;
          padding: 0 5px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          background: #67c23a;
          border-radius: 4px;
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          white-space: nowrap;
          .playing {
            flex: 0 0 12px;
            width: 12px;
            height: 9px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-right: 2px;
          }
          .playing__bar {
            width: 2.2px;
            height: 100%;
            background: #fff;
            animation: up-and-down 1.3s ease infinite alternate;
          }
          .playing__bar1 {
            height: 60%;
          }
          .playing__bar2 {
            height: 30%;
            animation-delay: -2.4s;
          }
          .playing__bar3 {
            height: 75%;
            animation-delay: -3.7s;
          }
          .playing__bar4 {
            height: 45%;
            animation-delay: -4.8s;
          }
        }
        .time {
          padding: 0 9px;
          height: 24px;
          font-size: 12px;
          font-weight: 400;
          color: $text-color-import;
          line-height: 24px;
          background: #f2f2f2;
          border-radius: 14px;
          white-space: nowrap;
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .content {
        .signal {
          display: flex;
          align-items: center;
          .img-activity {
            margin-right: 3px;
          }
          .title {
            flex: 1;
            min-width: 0;
            font-size: 16px;
            font-weight: 500;
            color: $text-color-import;
            line-height: 18px;
            @include ellipsisLine(1);
            cursor: pointer;
          }
        }
        .parallel {
          display: flex;
          align-items: center;
          .name,
          .num {
            font-size: 13px;
            font-weight: 400;
            color: $text-color-auxiliary;
          }
          .name {
            min-width: 0;
            @include ellipsisLine(1);
          }
          .num {
            white-space: nowrap;
            margin-right: 10px;
          }
          .price,
          .free {
            font-size: 16px;
            font-weight: 500;
            margin-left: auto;
          }
          .price {
            color: $text-color-price;
          }
          .free {
            color: $text-color-free;
            white-space: nowrap;
          }
          .divider {
            width: 1px;
            height: 10px;
            margin: 0 8px;
            background: #e4e7ed;
          }
          .btn {
            margin-left: 20px;
            flex: 0 0 80px;
            height: 32px;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            text-align: center;
            border-radius: 16px;
            cursor: pointer;
            @include edu-color-primary;
            @include edu-color-primary(background-color, 0.07);
          }
        }
        .mutable {
          margin-top: 14px;
          font-size: 14px;
          font-weight: 400;
          color: $text-color-auxiliary;
        }
      }
    }
    &.gongge {
      display: grid;
      grid-gap: 28px 28px;
      .item {
        grid-column: span 1 / span 1;
      }
      &.col-2 {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        .item {
          padding: 32px 30px;
          display: flex;
          align-items: center;
          .avatar {
            width: 96px;
            height: 96px;
          }
          .content {
            flex: 1;
            min-width: 0;
            margin-left: 15px;
            .parallel {
              margin-top: 15px;
            }
          }
        }
      }
      &.col-3 {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
      }
      &.col-4 {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
      }
      &.col-3,
      &.col-4 {
        .item {
          padding: 25px 15px 20px;
          .avatar {
            width: 110px;
            height: 110px;
            margin: 0 auto;
          }
          .content {
            margin-top: 30px;
            .parallel {
              margin-top: 15px;
            }
          }
        }
      }
    }
    &.scroll {
      position: relative;
      padding: 0 50px;
      .swiper-button-prev,
      .swiper-button-next {
        outline: none;
        width: 20px;
        height: 20px;
        margin-top: 20px;
        border-radius: 50%;
        color: #b7bac1;
        &:after {
          font-size: 16px;
        }
        &:hover {
          @include edu-color-primary;
        }
      }
      .swiper-button-prev.swiper-button-disabled,
      .swiper-button-next.swiper-button-disabled {
        pointer-events: auto;
        &:hover {
          color: #b7bac1 !important;
        }
      }
      .swiper-button-prev {
        left: 15px;
      }
      .swiper-button-next {
        right: 15px;
      }
      .divider {
        height: 1px;
        width: calc(100% + 40px);
        background-color: #f4f4f5;
        margin: 40px -20px 35px;
        position: relative;
        .divider__context {
          background-color: #fff;
          position: absolute;
          left: 50%;
          bottom: -11px;
          transform: translateX(-50%);
          .text {
            font-size: 16px;
            font-weight: 500;
            color: $text-color-import;
            text-align: center;
          }
          .time {
            margin-top: 10px;
            height: 22px;
            font-size: 13px;
            font-weight: 400;
            color: $text-color-auxiliary;
            line-height: 22px;
            background: #f4f4f5;
            border-radius: 11px;
            padding: 0 15px;
          }
        }
      }
      .item {
        padding: 32px 30px;
        display: flex;
        align-items: center;
        .avatar {
          width: 96px;
          height: 96px;
        }
        .content {
          flex: 1;
          min-width: 0;
          margin-left: 15px;
          .parallel {
            margin-top: 15px;
          }
        }
      }
    }
  }
  .course-list {
    padding: 0 15px;
    margin-top: 35px;
    .item {
      .picture {
        position: relative;
        .time {
          padding: 0 5px;
          height: 20px;
          font-size: 12px;
          color: #ffffff;
          line-height: 20px;
          background: rgba(48, 49, 51, 0.59);
          border-radius: 3px;
          position: absolute;
          bottom: 6px;
          left: 7px;
        }
        .tag {
          position: absolute;
          left: 0;
          top: 0;
        }
        .activity {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .content {
        .title {
          font-size: 16px;
          font-weight: 500;
          color: $text-color-import;
          @include ellipsis;
          cursor: pointer;
        }

        .teacher {
          display: flex;
          &-item {
            margin-right: 10px;
            .el-avatar {
              margin: 0 auto;
              display: block;
              ::v-deep .avatar-slot {
                font-size: 12px;
              }
            }
            .name {
              font-size: 12px;
              font-weight: 400;
              color: $text-color-auxiliary;
              margin-top: 5px;
              line-height: 18px;
              @include ellipsis;
              max-width: 48px;
              cursor: pointer;
            }
          }
        }
        .parallel {
          display: flex;
          align-items: center;
          .num {
            flex: 1;
            min-width: 0;
            font-size: 14px;
            font-weight: 400;
            color: $text-color-auxiliary;
          }
          .save {
            margin-left: 5px;
            font-size: 12px;
            font-weight: 400;
            color: #f54030;
            line-height: 20px;
            padding: 0 8px 0 4px;
            background: #ffedeb;
            border-radius: 3px;
          }
          .price,
          .free {
            font-size: 18px;
            font-weight: 500;
            margin-left: 5px;
          }
          .price {
            color: $text-color-price;
          }
          .free {
            color: $text-color-free;
          }
        }
      }
    }
    &.gongge {
      display: grid;
      .item {
        grid-column: span 1 / span 1;
      }
      &.col-2 {
        grid-gap: 28px 60px;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        .item {
          padding: 10px;
          display: flex;
          background: rgba(48, 49, 51, 0.02);
          border-radius: 6px;
          .picture {
            width: 240px;
            height: 133px;
          }
          .content {
            flex: 1;
            min-width: 0;
            padding: 8px 0 6px;
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            .parallel {
              margin-top: auto;
            }
            .teacher {
              margin-top: 15px;
            }
            ::v-deep .deduction {
              margin-top: 18px;
            }
          }
        }
      }
      &.col-3,
      &.col-4 {
        grid-gap: 28px 20px;
        .item {
          .content {
            margin-top: 15px;
            .parallel,
            ::v-deep .deduction {
              margin-top: 15px;
            }
          }
        }
      }
      &.col-3 {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
        .item {
          .picture {
            height: 207px;
          }
        }
      }
      &.col-4 {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
        .item {
          .picture {
            height: 153px;
          }
        }
      }
    }
    &.scroll {
      position: relative;
      padding: 0 50px;
      .swiper-button-prev,
      .swiper-button-next {
        outline: none;
        width: 20px;
        height: 20px;
        top: 72.5px;
        margin-top: -10px;
        border-radius: 50%;
        color: #b7bac1;
        &:after {
          font-size: 16px;
        }
        &:hover {
          @include edu-color-primary;
        }
      }
      .swiper-button-prev.swiper-button-disabled,
      .swiper-button-next.swiper-button-disabled {
        pointer-events: auto;
        &:hover {
          color: #b7bac1 !important;
        }
      }
      .swiper-button-prev {
        left: 15px;
      }
      .swiper-button-next {
        right: 15px;
      }
      .item {
        .picture {
          height: 145px;
        }
        .content {
          margin-top: 15px;
          .parallel,
          ::v-deep .deduction {
            margin-top: 15px;
          }
        }
      }
    }
  }
  // 推荐
  &.recommend-template {
    background-image: url('~@assets/images/course/course-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .course-header {
      border-left: none;
      .title {
        font-size: 26px;
        line-height: 34px;
      }
      .more {
        width: 66px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background: #ffffff;
        border-radius: 16px;
        @include edu-color-primary;
      }
    }
    .course-list {
      background: #ffffff;
      border-radius: 6px;
      margin-left: 15px;
      margin-right: 15px;
      &.gongge {
        padding-top: 18px;
        padding-bottom: 18px;
        &.col-2 {
          grid-gap: 18px 28px;
        }
      }
      &.scroll {
        padding: 30px 40px;
        .swiper-button-prev,
        .swiper-button-next {
          margin-top: 20px;
        }
      }
    }
  }
}
@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
</style>
